
<template>
  <div>
        <!-- 图片 -->
    <div style="margin: 100px 50px;">
      <img :src="require('@/assets/gif2.gif')" alt="My Animation" style="height: 70vh;width:60%;"> 
    
      </div>
    <div style="position:absolute;top: 35%;right: 5%;">
    <el-form label-position="left" label-width="80px" :model="formLabelAlign">
      <el-form-item label="用户名">
        <el-input v-model="formLabelAlign.name" size="medium" style="width: 250px;"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formLabelAlign.password" ize="medium"></el-input>
      </el-form-item>
      <el-button type="primary" size="mini" style="margin-left: 230px;" @click="loginuser">登录</el-button>
      <el-form-item>
        <el-link type="primary" style="margin: 5px;" @click="dialogFormVisible=true">注册</el-link>
        <el-link type="primary"style="margin: 5px;" @click="updatadialogFormVisible=true">修改密码</el-link>
        <el-link type="primary" style="margin: 5px;" @click="deletedialogFormVisible=true">注销用户</el-link>
      </el-form-item>
  
    </el-form>
  </div>
  
  <!-- 注册用户的表单 -->
  <el-dialog title="用户注册" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item> 
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form.oldpassword" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码" :label-width="formLabelWidth">
        <el-input v-model="form.newpassword" autocomplete="off" show-password></el-input>
      </el-form-item>
      
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="registeruser(form)">确 定</el-button>
    </div>
  </el-dialog>
  
  <!-- 修改密码的模态框 -->
  <el-dialog title="修改个人信息" :visible.sync="updatadialogFormVisible">
    <el-form :model="updataform">
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input v-model="updataform.name" autocomplete="off"></el-input>
      </el-form-item> 
      <el-form-item label="旧密码" :label-width="formLabelWidth">
        <el-input v-model="updataform.oldpassword" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item label="新密码" :label-width="formLabelWidth">
        <el-input v-model="updataform.newpassword" autocomplete="off" show-password></el-input>
      </el-form-item>
   
  
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="updatadialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="updataforeven(updataform)">确 定</el-button>
    </div>
  </el-dialog>
  <!-- 注销用户的模态框-->
  <el-dialog title="注销用户" :visible.sync="deletedialogFormVisible">
    <el-form :model="deteform">
      <el-form-item label="用户名" :label-width="formLabelWidth">
        <el-input v-model="deteform.name" autocomplete="off"></el-input>
      </el-form-item> 
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="deteform.oldpassword" autocomplete="off" show-password></el-input>
      </el-form-item>
      
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="deletedialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="deleteforeven(deteform)">确 定</el-button>
    </div>
  </el-dialog>
  
  </div>
  
  
    </template>
    <script>
      //固定格式 每个组件都得导出
    export default{
      data(){
        return{
          formLabelAlign: {
            name: '',
            password: ''
          },
          dialogFormVisible:false,
          form:{
            name:'',
            oldpassword:'',
            newpassword:'',
        
          },
          updataform:{
            name:'',
            oldpassword:'',
            newpassword:''
          },
          deteform:{
            name:'',
            oldpassword:''
          
          },
          formLabelWidth:"120px",
          updatadialogFormVisible:false,
          deletedialogFormVisible:false
  
        }
       
      },
      created(){
      
  
      },
  
      methods:{
       //登录按钮
        loginuser(){
            this.axios({
               url:this.$api+'/user/login',
               dataType:"json",
              method:'get',
              params:{
                username:this.formLabelAlign.name,
                userpass:this.formLabelAlign.password
                }        
            }).then(res=>{
              console.log(res.data);
  
              if(res.data.code==1){
                  
                this.$message({
                 message: '登录成功',
                 type: 'success'
                 });
                 var userInfo={}
                 userInfo["username"]=res.data.user.username
                 userInfo['userpass']=res.data.user.userpass
                 userInfo["rold"]=res.data.user.role["name"]


                    localStorage.setItem("userInfo", JSON.stringify(userInfo))
                 this.$router.push("/index")

              
  
                 //跳转到主页
              }
              else{
                
                this.$message.error(res.data.msg);
              }
  
                  }).catch(res=>{
                      console.log(res)
                  })
      
        },
        //注册用户
        registeruser(item){  
       this.$confirm('是否确定注册用户?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
  
            if(item.newpassword!=item.oldpassword){
          this.$message({
              type: 'warning',
              message: '两次密码输入不一样'
            });
            return
        }
         
        if(!item.name){
        alert("请填写用户名")
        return
       }
       if(!item.oldpassword){
        alert("请填写之前的密码")
        return
       }
       if(!item.newpassword){
        alert("请填写确认密码")
        return
       }
   
            this.axios({
               url:this.$api+"/user/register",
               dataType:"json",
              method:'get',
              params:{
                username:item.name,
                userpass:item.newpassword,
                suserpass:item.newpassword,
          
                }        
            }).then(res=>{
  
         console.log(res)


         if(res.data.code==1){
          this.$message({
              type: 'success',
              message: '注册成功，请重新登录'
            });
            this.dialogFormVisible=false
         }
         else{
          this.$message({
              type: 'warning',
              message: res.data.msg
            });
         }
      
            }).catch(res=>{
              console.log(res)
            })
    
          })
  
        },
        // 修改密码
        updataforeven(item){
            console.log(item)
       if(!item.name){
        alert("请填写用户名")
        return
       }
       if(!item.oldpassword){
        alert("请填写之前的密码")
        return
       }
       if(!item.newpassword){
        alert("请填写修改之后的密码")
        return
       }
   
       this.$confirm('是否确定修改密码?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then((res)=>{
            console.log(res)
            this.axios({
               url:this.$api+"/user/modify",
               dataType:"json",
              method:'get',
              params:{
                username:item.name,
                userpass:item.oldpassword,
                newpass:item.newpassword,
      
  
                }        
            }).then((res)=>{
              if(res.data.code==1){
                this.$message({
              type: 'success',
              message: '密码修改成功'
              })
              this.deletedialogFormVisible=false
            
              }
              else{
                this.$message({
              type: 'warning',
              message: res.data.msg
            })
              }
        
            }).catch((res)=>{
              console.log("错误信息")
              console.log(res)
              this.$message({
              type: 'warning',
              message: '修改失败'
            })
            })
  
  
          }).catch((res)=>{})
  
  
  
        },

        // 注销用户

        deleteforeven(item){
          if(!item.name){
        alert("请填写用户名")
        return
       }
       if(!item.oldpassword){
        alert("请填写的密码")
        return
       }
       this.$confirm('是否确认注销用户？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(res=>{
            console.log(res)
            this.axios({
               url:this.$api+"/user/logout",
               dataType:"json",
              method:'get',
              params:{
                username:item.name,
                userpass:item.oldpassword,
      
                } }).then(res=>{
                  if(res.data.code==1){
                    this.$message({
              type: 'success',
              message: '注销成功'
              })
              this.updatadialogFormVisible=false
                  }
                  else{
                    this.$message({
                  type: 'warning',
                 message: res.data.msg
                 })
                  }
                  console.log(res)
                }).catch(res=>{
                  console.log(res)
                })
                
                
              }).catch(res=>{})
            

        }
  
       
  
    }
   
  }
    </script>
     <style lang="less" scoped>
   
   body{
   
   }
    </style>